<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style class="cp-pen-styles">
* {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}
body {
	background: #ffffff;
	font-family: arial;
	font-size: 13px;
}
form {
	width: 400px;
	padding: 25px 50px 25px 50px;
	background: #84a659;
	display: block;
	margin: 100px auto;
	border-radius: 3px;
	color: #fff;
}
form fieldset {
	margin: 25px 0;
}
.select_wrapper {
	background: #6a8547 url("./img/arrow_down.png") no-repeat top 15px right 12px;
	line-height: 36px;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
    display: inline;
}
.select_wrapper:hover {
	background: #566c3a url("./img/arrow_down.png") no-repeat top 15px right 12px;
}
.select_wrapper span {
	display: block;
	margin: 0 30px 0 15px;
}

.select_wrapper .select_inner {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	color: #687278;
	display: none;
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	z-index: 3;
}
.select_wrapper .select_inner li {
	border-bottom: 1px solid #eee;
	padding: 0 15px;
}
.select_wrapper .select_inner li:hover {
	background: #eee;
}
.select_wrapper .select_inner li:last-child {
	border: none;
	border-radius: 0 0 5px 5px;
}
.select_wrapper .select_inner li:first-child {
	border-radius: 5px 5px 0 0;
}
</style>
<body>
    <div class="select_wrapper">
        <span style="width: 89px;">CSS3</span>
        <select class="selectbox" id="" name="" style="display: none;">
            <option value="dwtedx博客">dwtedx博客</option>
            <option value="CSS3" selected="selected">CSS3</option>
            <option value="Javascript">Javascript</option>
            <option value="Ruby">Ruby</option>
            <option value="Python">Python</option>
            <option value="C++">C++</option>
        </select>
        <ul class="select_inner" style="display: none;">
            <li id="dwtedx博客">dwtedx博客</li>
            <li id="CSS3">CSS3</li>
            <li id="Javascript">Javascript</li>
            <li id="Ruby">Ruby</li>
            <li id="Python">Python</li>
            <li id="C++">C++</li>
        </ul>
    </div>
</body>
<script src="./jquery-1.11.3.min.js"></script>
<script>
    $('.selectbox').parent().find('li').on('click', function (){
		var cur = $(this).attr('id');
		$('.selectbox').parent().children('span').text($(this).text());
		$('.selectbox').children().removeAttr('selected');
		$('.selectbox').children('[value="'+cur+'"]').attr('selected','selected');
		//alert($('.selectbox').children('[value="'+cur+'"]').text());				
		console.log($('.selectbox').children('[value="'+cur+'"]').text());
	});
	
	$('.selectbox').parent().on('click', function (){
		$(this).find('ul').slideToggle('fast');
	});
</script>
</html>